<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/brand.css?v={{ layui.admin.v }}-1" media="all">
</script>
<style>
    #brand-user-profile #user-profile, #brand-user-profile .user-profile-card {
        display: inline-block;
    }

    #brand-user-profile #user-img, #brand-user-profile #user-info {
        display: inline-block;
        float: left;
    }

    #brand-user-profile #user-img img {
        width: 7rem;
        margin: 1rem;
        border-radius: 50%;
        cursor: pointer;
    }

    #brand-user-profile #user-info {
        margin: .95rem 0 .95rem 1.2rem;
    }

    #brand-user-profile #user-info div {
        margin: 3px 0;
        max-width: 22rem;
    }

    #brand-user-profile #options-wrapper {
        text-align: center;
        margin-top: .5rem;
    }

    #brand-user-profile #update-user-info {
        cursor: pointer;
        margin-left: -1rem;
    }

    #brand-user-profile #options-wrapper a {
        padding: 4px 6px;
        color: rgba(0, 0, 0, 0.65);
        border: 1px solid #d9d9d9;
        border-radius: 2px;
    }

    #brand-user-profile #options-wrapper a:hover {
        color: #40a9ff;
        border-color: #40a9ff;
    }

    #brand-user-profile .layui-form-item {
        margin-bottom: 0;
    }
</style>
<title>设置我的资料</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>设置</cite></a>
        <a><cite>个人中心</cite></a>
    </div>
</div>
<div id="userinfo-container">

</div>
<script type="text/html" id="userinfoTpl">
    <div class="layui-fluid layui-anim brand-anim" id="brand-user-profile" lay-title="个人中心">
        <div class="layui-row layui-col-space8 brand-container">
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
                <div class="layui-card">
                    <div class="layui-card-header">个人信息</div>
                    <div class="layui-card-body user-profile-card">
                        <div id="user-profile">
                            <div id="user-img">
                                {{# if(d.teacherImage == '' || d.teacherImage == undefined ) { }}
                                <img class="layadmin-homepage-pad-img" src="{{ layui.setter.base }}style/res/template/defaultHead.png" id="avatar" style="width: 90px;height: 90px;">
                                {{# } else { }}
                                <img class="layadmin-homepage-pad-img" src="{{ d.teacherImage }}" id="avatar" style="width: 90px;height: 90px;">
                                {{# } }}
                                <div id="options-wrapper">
                                    <div id="update-user-info">
                                        <a>
                                            <span class="layui-icon layui-icon-setting"></span>
                                            编辑资料
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div id="user-info">
                                <div><span class="layui-icon layui-icon-user"></span> 姓名：
                                    {{d.teacherName}}
                                </div>
                                <div><span class="layui-icon layui-icon-home"></span> 部门：
                                    {{# if(d.deptType === 0){ }}
                                    小学部
                                    {{# } }}
                                    {{# if(d.deptType === 1){ }}
                                    初中部
                                    {{# } }}
                                    {{# if(d.deptType === 2){ }}
                                    高中部
                                    {{# } }}
                                </div>
                                <div><span class="layui-icon layui-icon-skin"></span> 性别：
                                    {{# if(d.teacherSex == 1){ }}
                                    男
                                    {{# } }}
                                    {{# if(d.teacherSex == 0){ }}
                                    女
                                    {{# } }}
                                </div>
                                <div><span class="layui-icon layui-icon-phone"></span> 电话：
                                    {{d.teacherPhone?d.teacherPhone:'暂无电话信息'}}
                                </div>
                                <div><span class="layui-icon layui-icon-mail"></span> 邮箱：
                                    {{d.teacherEmail?d.teacherEmail:'暂无电话信息'}}
                                </div>
                                <div><span class="layui-icon layui-icon-read"></span> 简介：
                                    {{d.teacherDescription?d.teacherDescription:'暂无简介'}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>


<script type="text/javascript">
    layui.use(['jquery', 'form', 'brand', 'baseSetting', 'admin','layarea', 'view','laytpl','upload'], function () {
        var $ = layui.jquery,
            admin = layui.admin,
            proPath = layui.baseSetting.brandConfig.proApi,
            brand = layui.brand,
            setter=layui.setter,
            laytpl = layui.laytpl,
            form = layui.form,
            upload = layui.upload,
            view = layui.view,
            layarea = layui.layarea,
            $view = $('#brand-user-profile');

        let currentUser = layui.data(layui.setter.tableName)[layui.setter.USERNAME];
        let getTpl = userinfoTpl.innerHTML
            ,viewT = document.getElementById('userinfo-container');
        laytpl(getTpl).render(currentUser, function(html){
            viewT.innerHTML = html;
        });


        $(document).on('click', '#update-user-info', function () {
            console.log(currentUser);
            admin.popup({
                id: 'LAY-theme-userinfo-edit',
                area: ['1000px', '730px'],
                shadeClose: false,
                shade: 0.3,
                anim: 5,
                resize: false,
                title: '个人信息修改',
                success: function () {
                    view(this.id).render('set/user/profileUpdate', currentUser).then(function () {
                    }).done(function () {
                        layarea.render({
                            elem: '#area-picker',
                            data: {
                                province: currentUser.teacherProvince,
                                city: currentUser.teacherCity,
                                county: currentUser.teacherDistrict,
                            }
                        });
                        form.render();
                    });
                }
            });
        });

        let uploadInst = upload.render({
            elem: '#avatar'
            ,url: proPath+'/admin/teacher/setAvatar'
            ,headers:{
                Authentication :layui.data(layui.setter.tableName)[layui.setter.TOKENNAME]
            }
            ,choose: function (obj) {
                uploadInst.config.elem.next()[0].value = '';
            }
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#avatar').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //上传成功
                if(res.status == '200'){
                    brand.alert.success(res.message);
                    admin.req({
                        url: proPath+'/admin/teacher/flush/'+layui.data(layui.setter.tableName)[layui.setter.USERNAME].teacherNum //实际使用请改成服务端真实接口
                        ,type : 'GET'
                        ,done: function(res){
                            if(res.status == '200'){
                                layui.data(setter.tableName, {
                                    key: setter.USERNAME
                                    ,value: res.data
                                });
                            }
                        }
                    });
                }
            }
        });

    })
</script>